<template>
  <div class="recommendMusic">
    <div class="playHeader">
      <p>推荐新歌曲</p>
    </div>
    <!-- 内容区域 -->
    <div class="musicUl">
      <li v-for="(i,index) in newSongArr " :key="i.id">
        <el-card class="my-card">
          <a href="#">
            <p class="hoveP" @mouseenter="mouseOver(index)" @mouseleave="mouseLeave(index)">
              <span
                class="musicName2"
                :class="index==currentIndex?'isNone':''"
                ref="acp"
              >{{index+1}}</span>
              <i
                class="iconfont icon-bofang fontBoFan"
                :class="index==currentIndex?'':'isNone'"
                @click="palyMusic(i)"
              ></i>
            </p>
            <img :src="i.picUrl" alt />
            <p class="songText">
              <span class="songName">{{i.name}}</span>
              <span class="songName1">{{i.song.album.artists[0].name}}</span>
            </p>
            <span class="musicName">《{{i.name}}》</span>
            <span class="musicName3">{{i.song.lMusic.playTime|formatDate}}</span>
          </a>
        </el-card>
      </li>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      musicName: '',
      // 新歌曲数据
      newSongArr: null,
      currentIndex: -1,
      current: true, // 鼠标是否移入
      urlMusic: '',
      isShowTag: false
    }
  },
  methods: {
    mouseOver (index) {
      this.currentIndex = index
    },
    mouseLeave (index) {
      this.currentIndex = -1
    },
    async getNewSong () {
      const { data: res } = await this.$http.get('/personalized/newsong')
      this.newSongArr = res.result
      console.log(res)
    },
    // 播放音乐
    async palyMusic (i) {
      console.log(i)
      this.urlMusic = `https://music.163.com/song/media/outer/url?id=${i.id}.mp3`
      this.isShowTag = true
      this.$emit('palyMusic', this.urlMusic, this.isShowTag, i)
    }
  },
  mounted () {
    this.getNewSong()
  }
}
</script>

<style lang="less" scoped>
.recommendMusic {
  margin-bottom: 50px;
}
.isNone {
  display: none;
}
.playHeader {
  height: 30px;
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}
.musicUl {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li {
    width: 49%;
    height: 80px;
    display: flex;
    margin-bottom: 10px;
    border-radius: 2px;
    .my-card {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0;
      padding: 0;
    }
    /deep/.el-card__body {
      padding: 0;
      width: 100%;
      height: 100%;
    }
    a {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: #000;
      img {
        width: 55px;
        height: 55px;
      }
      .songText {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 150px;
        align-items: center;
        font-size: 14px;
        justify-content: center;
        .songName {
          margin-bottom: 5px;
          font-weight: bold;
        }
        .songName1 {
          color: #555;
        }
      }
      .musicName {
        font-weight: bold;
        width: 140px;
        font-size: 14px;
      }
      .musicName2 {
        font-weight: bold;
      }
      .fontBoFan {
        font-size: 22px;
        color: red;
      }
      .hoveP {
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 16px;
        width: 50px;
        justify-content: center;
      }
    }
  }
}
</style>
